<template>
  <view id="makeServe">
   
      <view class="chooseUser" @click="chooseUser" v-show="!oid">
          选择用户 <text>{{nickname}}</text>
      </view>
      <view class="part2">
          <uni-list>
            <uni-list-item title="服务地址" thumb="/static/img/weizhi.png" :showArrow="false" />
          </uni-list>
          <view class="cont">
              
              <view v-if="address">{{address.sheng}}{{address.shi}}{{address.qu}}{{address.address}}</view>
              <view v-if="address"> {{address.linkman}} {{address.tel}} </view>
              <div v-if="!address" style="text-align:center;line-height:100rpx">请选择或添加服务地址~</div>
          </view>
      </view>

      <view class="part3 makeServe_define">
          <uni-list>
            <uni-list-item title="服务时长" thumb="/static/img/fuwushichang.png" :showArrow="false">
                <!-- <template v-slot:right="">
					1
				</template> -->
                <view slot="right" class="right">
                    <uni-number-box :min="2" :max="6" :value="serverTime" @change="changeServerTime" /> 
                    <text>小时</text>
                </view>
            </uni-list-item>
          </uni-list>
      </view>

      <view class="part3">
          <uni-list>
            <uni-list-item @click="chooseTimes" title="上门时间" thumb="/static/img/shangmenshijian.png" :showArrow="true" :rightText="visitTime" />
          </uni-list>
      </view>

      <view class="part4">
          <uni-list>
            <uni-list-item title="服务人员" thumb="/static/img/fuwurenyuan.png" :showArrow="false" />
          </uni-list>
          <view class="cont">
              <!-- <view class="cont-title"> <view :class="{'active':chooseType==1}" @click="chooseTypeFuc(1)"> 系统指派 </view> <view :class="{'active':chooseType==2}" @click="chooseTypeFuc(2)"> 自由选择 </view> </view> -->
              
              <scroll-view  class="scroll-view_H" scroll-x="true" :scroll-top='scrollTop' @scroll="scroll" scroll-left="0">
                    <view class="cont-main">
                        <view v-for="(item,i) in PersonList" :key="i" class="cont-list" @click="popupDialog(item,i)" > 
                            <view > <img :src="item.imgurl"  alt="cc"  /> </view>
                            <view >{{item.person_name}}</view>
                            <view >好评率{{Number(item.hp_rate).toFixed(1)}}%</view>
                            <view :class="{'active':nowChoosePeople==i}" @click.stop="choosePeople(item,i)"> <text>{{nowChoosePeople==i?'已选':'选Ta'}}</text> </view>
                        </view>
                    </view>
              </scroll-view>
              
          </view>
      </view>
      <view class="orderPrice" v-show="!oid">

          <view class="price">￥{{specs.specs_price}}</view>
          <view class="priceT">订单总额</view>
          <view class="zhiding">
              <view>指定金额(元)</view>
              <input v-model="yf_jine"  placeholder="请输入目标金额"/>
          </view>
      </view>
      <view class="part5">
          <view class="btn"  @click="toCreateOrder">
              确定
          </view>
      </view>

      <view class="part6" v-if="!oid">
          <uni-list>
            <uni-list-item @click="goRemark" title="备注" thumb="/static/img/beizhu.png"  />
          </uni-list>
      </view>

      <!-- 弹窗 -->
    <view>
        <uni-popup ref="showpopup" type="bottom">
            <view class="popupCont">
               <view class="close" @click="close"> 收起</view>
               <view class="cont">
                    <view class="popupCont-part1"> 
                        <img :src="personDetail.basic.imgurl" alt="ccc">
                        <view class="part1-right">
                            <view> {{personDetail.basic.person_name}} </view>
                            <view> {{personDetail.basic.hp_rate}} </view>
                            <view> 40岁 </view>
                            <view> {{personDetail.basic.working}}从业经验 </view>
                        </view>
                    </view>
                    <view class="popupCont-part2">
                        <view class="part2-title"> 特长领域 </view>
                        <view class="part2-cont">
                            <view> 
                               技能2
                            </view>
                            <view> 
                                技能1    
                            </view>
                        </view>
                    </view>
                    <view class="popupCont-part3">
                        <view class="part3-title"> 相关工作经历 </view>
                        <view class="part3-cont" v-for="(items,index) in personDetail.record" :key="index">
                            <view> 
                               <view> {{items.serve_name}} </view>
                               <view>{{items.create_time}}</view>
                            </view>
                            <!-- <view> 
                               <view> 经历经历经历 </view>
                               <view>2021-212-2</view> 
                            </view> -->
                        </view>
                    </view>
               </view>

               <view class="btn" @click="choosePeople2">选Ta</view>
            </view>
        </uni-popup>
    </view>

    <!-- 弹窗 -->
      <chooseTime ref="timeC" @suerTime='suerTime' />
  </view>
</template>

<script>
import {mapGetters} from 'vuex';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item1.vue'
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import chooseTime from '@/components/chooseTime/chooseTime.vue'
export default {
    components: {
        uniNavBar,
        uniList,
        uniListItem,
        uniNumberBox,
        uniPopup,
        chooseTime
    },  
    computed: {
			...mapGetters([
			  "userInfo",
			  "isLogin",
			  "token",
			])
    },
    watch:{
        userId(nv,ov){
            console.log(nv,ov,this.address)
             this.getUserAddress()
            // this.addressDetail(Object.assign(this.options,{add_id:nv}))
        },
        isChange(nv,ov){
            if(nv==true){
                //this.addressDetail(Object.assign(this.options,{add_id:this.add_id}))
            }
        }
    },
    data(){
        return{
            chooseType:1,
            nowChoosePeople:-1,
            nowChoosePeople2:-1,
            scrollTop:0,
            old: {
                scrollTop: 0
            },
            visitTime:'请选择',
            serve:{},
            address:null,
            PersonList:[],//服务人员信息
            remarkData:"",
            add_id:null,
            qu_id:null,
            isChange:false,
            needParms:{},
            serverTime:2,//服务时长
            userId:"",//用户ID
            nickname:"",
            service_id:'',
            psid:'',//规格ID
            specs:[],//规格列表
            yf_jine:"",//指定金额
            sp_id:"",//服务人员的ID
            oid:'',
            uid:null,
            qu_id:null,
            od_id:null,
            sp_name:"",
            personDetail:{
                basic:{},
                record:[]
            },
            OrderDetail:{},
            serveObj:{}
           
        }
    },
     onLoad(options){
          if(options.oid&&options.oid!='null'){
            this.oid = options.oid
            this.userId = options.uid
            this.qu_id = options.qu_id
            this.od_id = options.od_id=='undefined'?null:options.od_id
            // console.log(options.od_id,this.od_id)
            uni.setNavigationBarTitle({
					title:'编辑订单(3/3)'
            })
            if(options.parms){
                let parms = JSON.parse(options.parms);
                this.serverTime = parms.service_list2.serve_time
                this.visitTime =  parms.service_list2.visit_time
                this.sp_id = parms.service_list2.serve_person[0]
                this.sp_name = parms.service_list2.serve_personArr[0]
                console.log(this.visitTime,parms,'ppppppppppp')
            }
        }
         this.service_id = options.service_id;
         this.psid = options.psid;
         this.serveDetail()
        //this.getServeSub(options)
        //this.addressDetail(Object.assign(options,{add_id:null}))
    },
    mounted(){
        uni.$on("changeAddress",(res)=>{
            //console.log(res,'改变地址了')
            this.nickname = res.nickname
            this.userId = res.uid;//获取所选择的用户ID
            // this.isChange = res.isChange
            // this.add_id = res.addId
           
        })
    },
    onUnload(){
			// console.log("卸载页面了")
            uni.$off("changeAddress")
            uni.$off("remark")  
	},
    methods:{
        // getServeSub(parms){//获取预约服务页相关
        //     this.$store.dispatch("mOrderDetail",{oid:options.oid}).then(res=>{
		// 		if(res.code==1){
		// 			this.OrderDetail = res.data
		// 		}
		// 	})
        // },
        serveDetail(){//获取该服务详情
            this.$store.dispatch("serveDetail",{service_id:this.service_id}).then(res=>{
                
                if(res.code==1){
                    let {specs,banner} = res.data
                    this.specs=specs.filter(item=>{
                        return item.psid == this.psid
                    })[0]
                    this.serveObj={
                        serve_name:res.data.service_name,
                        specs_price:this.specs.specs_price,
                        specs_name:this.specs.specs_name,
                        page_img_url:banner.length>0?banner[0].imgurl:""
                    }

                    //console.log(specs,'规格列表')
                }
            })
        },
        getPersonList(parms){//获取服务人员信息
            this.$store.dispatch("getServerList",parms).then(res=>{
                //console.log(res,'人员信息')
                if(res.code==1){
                    this.PersonList = res.data
                    res.data.map((item,index)=>{
                        console.log(item.sp_id,this.sp_id)
                        if(item.sp_id == this.sp_id){
                            this.nowChoosePeople =index
                        }
                    })
                    this.needParms=parms
                }
                
            })
        },
        getUserAddress(parms){//获取用户地址详情
            this.$store.dispatch("getUserAddress",{uid:this.userId}).then(res=>{
                console.log(res,'用户地址详情')
                if(res.code==1){
                    let addr = res.data[0]
                     this.address = addr;
                     this.add_id = addr.add_id
                      this.qu_id = addr.qu_id
                     this.getPersonList({qu_id:addr.qu_id,pid:this.service_id})
                }
            })
        },
        back(){
            history.back()
        },
        chooseTypeFuc(i){
            this.chooseType = i
        },
        scroll(e){
            this.old.scrollTop = e.detail.scrollTop
        },
        choosePeople(item,i){
            this.nowChoosePeople = i
            console.log(item,'选择服务人')
            this.sp_id = item.sp_id
            this.sp_name = item.person_name
        },
        choosePeople2(){
            this.nowChoosePeople = this.nowChoosePeople2
            this.$refs['showpopup'].close()
        },
        popupDialog(item,i){
            //console.log(item,'????')
            this.nowChoosePeople2 = i
            this.$store.dispatch("serverDatas",{sp_id:item.sp_id}).then(res=>{
                console.log(res)
                if(res.code==1){
                    this.personDetail = res.data
                    //console.log(this.personDetail)
                }
            })
            this.$refs['showpopup'].open()
        },
        close(){
            this.$refs['showpopup'].close()
        },
        chooseUser(){
             uni.navigateTo({
                url:"/pages/order/createOrder/chooseUser"
            })
        },
        goRemark(){ 
            uni.$on('remark',(res)=>{
                this.remarkData = res    
            })
            uni.navigateTo({
                url:"/pages/order/createOrder/remark?mark="+this.remarkData
            })
        },
        chooseTimes(){//选择上门时间
            this.$nextTick(() => {
                this.$refs['timeC'].$refs['showpopup'].open()
            })
        },
        suerTime(val){
            this.visitTime = val
            this.$refs['timeC'].$refs['showpopup'].close()
        },
        chooseAddress(){
            this.isChange=false
            uni.navigateTo({
                url:`/pages/mine/myaddres/index?server=1&add_id=${this.add_id}`
            })
        },
        changeServerTime(val){
            this.serverTime = val
        },
        toCreateOrder(){//确认预约按钮
          let sp_idArr = [],obj={},sp_nameArr = [];
          if(this.sp_id){
              sp_idArr.push(this.sp_id)
              sp_nameArr.push(this.sp_name)
          }

          if(this.oid){//如果是修改订单

               obj={
                // add_id:this.add_id,//地址ID
                // oid:this.oid,//订单ID
                // qu_id:this.qu_id,//区域ID
                // yf_jine:this.yf_jine,//指定金额
                // remark:this.remarkData,//备注
                isEdit:this.od_id?true:false,//修改订单是否是新增还是编辑
                service_list:[
                        {   uid:this.userId,//所选的用户ID
                            od_id:this.od_id?this.od_id:null,//订单详情ID，如果编辑原有服务必传，该参数在订单详情服务列表中返回，新增服务不传
                            pid:this.service_id,//服务ID
                            psid:this.psid,//服务规格ID
                            serve_time:this.serverTime,//服务时长
                            visit_time:this.visitTime,//上门时间
                            serve_type:3,//服务人员，1系统指派，2自由选择 3-区域经理指派
                            // remark:this.remarkData,//备注
                            serve_person:sp_idArr,//	所选择服务人员ID数组
                            serve_personArr:sp_nameArr,
                            serve_name:this.serveObj.serve_name,//服务名字
                            specs_price:this.serveObj.specs_price,//规格价格
                            specs_name:this.serveObj.specs_name,//规格名字
                            page_img_url:this.serveObj.page_img_url,//服务图片
                        }
                ]
            }
          }else{
             obj={
                uid:this.userId,//所选的用户ID
                add_id:this.add_id,//地址ID
                qu_id:this.qu_id,//区域ID
                yf_jine:this.yf_jine,//指定金额
                remark:this.remarkData,//备注
                service_list:[
                    {
                            service_id:this.service_id,//服务ID
                            psid:this.psid,//服务规格ID
                            serve_time:this.serverTime,//服务时长
                            visit_time:this.visitTime,//上门时间
                            serve_type:3,//服务人员，1系统指派，2自由选择 3-区域经理指派
                            // remark:this.remarkData,//备注
                            serve_person:sp_idArr,//	所选择服务人员ID数组	
                        }
                ]
            }
           } 
           let parmsAll=obj;
        //    return
            if(!parmsAll.add_id&&!this.oid){
                    uni.showToast({
                        title: `请选择服务地址`,
                        icon: "none",
                    });
                    return false
            }else if(parmsAll.service_list[0]['visit_time']=='请选择'){
                 uni.showToast({
                        title: `请选择上门时间`,
                        icon: "none",
                    });
                    return false
            }
            else if(!parmsAll.yf_jine&&!this.oid){
                 uni.showToast({
                        title: `请选择指定金额`,
                        icon: "none",
                    });
                    return false
            }
            else if(!parmsAll.service_list[0].serve_person){
                 uni.showToast({
                        title: `请选择服务人员`,
                        icon: "none",
                    });
                    return false
            }else{
                if(!this.oid){
                    this.$store.dispatch("mOrderCreate",parmsAll).then(res=>{
                        console.log(res)
                        if(res.code==1){
                            uni.reLaunch({
                                url:`/pages/index/index`
                            })
                        }
                    })
                }else{

                    uni.$emit("getModifyOrder",parmsAll)
                    uni.navigateBack({
                        delta: 3
                    })
                    // this.$store.dispatch("mOrderUpdate",parmsAll).then(res=>{
                    //     console.log(res)
                    //     if(res.code==1){
                    //         uni.reLaunch({
                    //             url:`/pages/order/modifyorder?oid=${this.oid}`
                    //         })
                    //     }
                    // })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
page{
    background: #f7f7f7;
}
#makeServe{
    padding: 20rpx;
    .orderPrice{
        width: 100%;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        .price{
            text-align: center;
            color: #2f87ff;
            font-size: 32rpx;
            font-weight: bold;
        }
        .priceT{
            font-size: 28rpx;
            color: #262e34;
            text-align: center;
        }
        .zhiding{
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            color: #a4a8b7;
            margin-top:20rpx ;
            view{
                width: 50%;
            }
            input{
                width: 50%;
                text-align: right;
            }
        }
    }
    .chooseUser{
        padding: 20rpx;
        background: #fff;
        line-height: 60rpx;
        color: #a4a8b7;
        font-size: 32rpx;
       
        text{
            color: #262e34;
            font-size: 32rpx;
            font-weight: bold;
            margin-left: 20rpx;
        }
    }
    .part1{
        background: #fff;
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        >view{
            display: flex;
            justify-content: start;
            view{

                
                &:nth-of-type(1){
                    img{
                        width: 128rpx;
                        height: 128rpx;
                        border-radius: 10rpx;
                    }
                }
                &.rightBox{
                    font-size: 26rpx;
                    padding-left: 20rpx;
                    box-sizing: border-box;
                    width: 100%;
                    view{
                        &:nth-of-type(1){
                            font-weight: bold;
                            line-height: 44rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            max-height: 44rpx;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            // @include toe;
                        }
                        &:nth-of-type(2){
                            font-size: 22rpx;
                            color: #929292;
                            line-height: 40rpx;
                        }
                         &:nth-of-type(3){
                            font-size: 20rpx;
                            color: #000;
                        }
                    }
                }
            }
        }
    }
    .part2{
        background: #fff;
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        margin-top: 20rpx;
        .cont{
            background: #f9f9f9;
            margin: 20rpx;
            width: 638rpx;
            height: 120rpx;
            font-size: 24rpx;
            color: #9c9c9c;
            box-sizing: border-box;
            padding: 10rpx 20rpx;
            
            view{
                &:nth-of-type(1){
                    line-height: 44rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    max-height: 44rpx;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    margin-top: 10rpx;
                }
                &:before{
                    content: '';
                    width: 10rpx;
                    height: 10rpx;
                    background: #247cf6;
                    border-radius: 50%;
                    display: inline-block;
                    margin-right: 10rpx;
                }
            }
        }
    }
    .someS{
        color: red;
    }
    .part3{
        margin-top: 20rpx;
        // @extend .someS;//继承
        .right{
            position: relative;
            text{
                position: absolute;
                left: 110rpx;
                top: 50%;
                transform: translateY(-50%);
                font-size: 20rpx;
            }
        }
    }
    .part4{
        margin-top: 20rpx;
        .cont{
            
            padding: 20rpx;
            padding-left: 100rpx;
            // padding-bottom: 80rpx;
            background: #fff;
            box-sizing: border-box;
            .cont-title{
                display: flex;
                justify-content: start;
                
                view{
                    width: 158rpx;
                    line-height: 50rpx;
                    text-align: center;
                    border-radius: 8rpx;
                    border: 2px solid #929292;
                    color: #929292;
                    margin-right: 20rpx;
                    font-size: 24rpx;
                    &.active{
                        color: #3088FF;
                        border: 2px solid #3088FF;
                    }
                }
            }
            .scroll-view_H{
                margin-top: 20rpx;
                width: 100%;
                // flex-direction: row;
            
                .cont-main{
                    display: flex;
                    justify-content: start;
                    flex-wrap: nowrap;
                    box-sizing: border-box;
                    width: 100%;
                    .cont-list{
                        flex-shrink: 0;
                        // height: 160rpx;
                        width: 158rpx;
                        font-size: 28rpx;
                        border-radius: 8rpx;
                        text-align: center;
                        margin-right: 40rpx;
                        view{
                           &:nth-of-type(1){
                                height: 90rpx;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            &:nth-of-type(2){
                                font-weight: 550;
                                width: 100%;
                                background: #f7f7f7;
                                font-size: 28rpx;
                                line-height: 60rpx;
                            }
                            &:nth-of-type(3){
                                color: #a2a2a2;
                                font-size: 20rpx;
                                background: #f7f7f7;
                                padding-bottom: 10rpx;
                            }
                            &:nth-of-type(4){
                                text-align: center;
                                background: #fff;
                                margin-bottom: 20rpx;
                                margin-top: 20rpx;
                                text{
                                    color: #fff;
                                    background: #eee;
                                    display: inline-block;
                                    width: 100rpx;
                                    height: 40rpx;
                                    line-height: 40rpx;
                                    border-radius: 20rpx 20rpx;
                                    font-size: 22rpx;
                                    // padding: 4rpx 12rpx;
                                }
                                &.active{
                                    text{
                                        background: #3088ff;
                                    }
                                    

                                }  
                            }
                            
                        }
                    }
                }
            
            }
        }
    }
    .part5{
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        padding: 20rpx;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        view{
            &:nth-of-type(1){
                font-size: 24rpx;
                view{
                    &:nth-of-type(1){
                        color: #b6b6b6;
                        text{
                            text-decoration: line-through;
                        }
                    }
                }
            }
            &.btn{
                width: 250rpx;
                height: 70rpx;
                border-radius: 10rpx;
                background: #2f87ff;
                text-align: center;
                line-height: 70rpx;
                font-size: 26rpx;
                color: #fff;
            }
        }
    }
    .part6{
        margin-top: 20rpx;
        padding-bottom: 140rpx;
    }
    .popupCont{
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        position: relative;
        .close{
            position: absolute;
            font-size: 30rpx;
            right: 20rpx;
            top: 20rpx;
            color: #247cf6;
        }
        .cont{
             margin-top: 40rpx;
            .popupCont-part1{
                display: flex;
                justify-content: start;
                img{
                    width: 200rpx;
                    height: 200rpx;
                }
                .part1-right{
                    view{
                        padding-left: 20rpx;
                        box-sizing: border-box;
                        &:nth-of-type(1){
                            font-size: 30rpx;
                            font-weight: bold;
                            line-height: 60rpx;

                        }
                        &:nth-of-type(2){
                            font-size: 24rpx;
                            color: #eee;
                        }
                         &:nth-of-type(3){
                            font-size: 24rpx;
                            margin-top: 40rpx;
                        }
                        &:nth-of-type(4){
                            font-size: 24rpx;
                            
                        }
                    }
                }
            }
            .popupCont-part2{
                margin-top: 20rpx;
                .part2-title{
                    font-size: 30rpx;
                    font-weight: bold;
                }
                .part2-cont{
                    display: flex;
                    justify-content: start;
                    margin-top: 20rpx;
                    view{
                        color: #ff6800;
                        background-color: rgba(255, 104, 0, 0.1);
                        border: 1px solid #ff6800;
                        font-size: 24rpx;
                        padding: 4rpx 20rpx;
                        border-radius: 10rpx;
                        margin-right: 20rpx;
                        margin-bottom: 20rpx;
                    }
                }

            }
            .popupCont-part3{
                margin-top: 20rpx;
                padding-bottom: 100rpx;
                .part3-title{
                    font-size: 30rpx;
                    font-weight: bold;
                }
                .part3-cont{
                    
                    margin-top: 20rpx;
                    >view{
                        display: flex;
                        justify-content: space-between;
                        margin-top: 20rpx;
                        font-size: 24rpx;
                    }
                    
                }

            }
        }
        .btn{
            position: fixed;
            bottom: 10rpx;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 60%;
            line-height: 60rpx;
            text-align: center;
            color: #fff;
            background: #3088FF;
            border-radius: 10rpx;
            font-size: 26rpx;
        }

    }

}
</style>
